import * as Dialog from "@radix-ui/react-dialog"
import { X } from "lucide-react"
import styles from "./index.module.scss"

const ConfirmationDialog = ({
    open,
    onOpenChange,
    title = "Confirmation",
    description = "Are you sure you want to permanently delete this chat? This cannot be undone.",
    cancelText = "Cancel",
    confirmText = "Delete",
    onConfirm,
}) => {
    return (
        <Dialog.Root open={open} onOpenChange={onOpenChange}>
            <Dialog.Portal>
                <Dialog.Overlay className={styles.overlay} />
                <Dialog.Content className={styles.content}>
                    <Dialog.Close className={styles.close}>
                        {/* <button className={styles.closeButton}> */}
                            <X size={16} />
                        {/* </button> */}
                    </Dialog.Close>

                    <Dialog.Title className={styles.title}>{title}</Dialog.Title>

                    <Dialog.Description className={styles.description}>{description}</Dialog.Description>

                    <div className={styles.buttons}>
                        <button className={styles.cancel} onClick={() => onOpenChange(false)}>
                            {cancelText}
                        </button>
                        <button
                            className={styles.confirm}
                            onClick={() => {
                                onConfirm()
                                // onOpenChange(false)
                            }}
                        >
                            {confirmText}
                        </button>
                    </div>
                </Dialog.Content>
            </Dialog.Portal>
        </Dialog.Root>
    )
}

export default ConfirmationDialog
